<template>
  <RadModal
    :visible="visible"
    :loading="false"
    :is-update="isUpdate"
    title="差异日志"
    @visible-change="updateVisible"
    @ok="
      () => {
        updateVisible(false);
      }
    "
  >
    <Tabs v-model:activeKey="activeKey" style="height: 100%">
      <TabPane key="SQL语句" tab="SQL语句">
        {{ log.sql }}
      </TabPane>
      <TabPane key="变更前数据" tab="变更前数据" class="group-list">
        <vue-json-pretty
          v-if="log.beforeData"
          :path="'res'"
          :data="{ key: JSON.parse(log.beforeData) }"
        />
      </TabPane>
      <TabPane key="变更后数据" tab="变更后数据" class="group-list">
        <vue-json-pretty
          v-if="log.afterData"
          :path="'res'"
          :data="{ key: JSON.parse(log.afterData) }"
        />
      </TabPane>
      <TabPane key="业务对象" tab="业务对象">
        <vue-json-pretty
          v-if="log.businessData"
          :path="'res'"
          :data="{ key: JSON.parse(log.businessData) }"
        />
      </TabPane>
    </Tabs>
  </RadModal>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import RadModal from '@/components/RadModal/index.vue';
  import VueJsonPretty from 'vue-json-pretty';

  const emit = defineEmits<{
    (e: 'done', isUpdate: boolean, data: object): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: any | null;
  }>();
  // 是否是修改
  const isUpdate = ref(false);
  const activeKey = ref('SQL语句');

  const log = ref({
    sql: '',
    beforeData: '',
    afterData: '',
    businessData: ''
  });
  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          log.value = props.data;
        } else {
          isUpdate.value = false;
        }
      } else {
        log.value = {
          sql: '',
          beforeData: '',
          afterData: '',
          businessData: ''
        };
      }
    }
  );
</script>

<style scoped>
  .group-list {
    height: calc(100vh - 350px);
    overflow: auto;
  }
  .group-list::-webkit-scrollbar {
    width: 2px;
  }
</style>
